<template>
  <div class="w-full h-full relative">
    <div class="w-full flex flex-col flex-center bg-[#005969] py-20px">
      <div class="w-full flex px-1.5rem flex-center flex-col text-white">
        <van-image
          round
          width="5rem"
          height="5rem"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          :fit="'cover'"
        />
        <div class="text-1.25rem mt-1em">
          {{ vita.talentchainVita?.name }} / {{ vita.talentchainVita?.engName }}
          <countryIco
            :countryId="
              vita.talentchainVita?.memberCountryId ? vita.talentchainVita.memberCountryId : null
            "
          ></countryIco>
        </div>
        <div class="flex flex-col mt-0.5rem text-0.8rem">
          <div class="mt-0.5em">
            <van-icon name="manager-o" class="mr-0.5em" />
            <span
              >{{ vita.talentchainVita?.sex === 1 ? '男' : '女' }} <span>|</span>
              {{ vita.talentchainVita?.age }}周岁</span
            >
          </div>
          <div class="mt-0.5em">
            <van-icon name="friends-o" class="mr-0.5em" />
            <span>
              {{
                configStore.getGZJYCode.find((item) => item.id === vita.talentchainVita?.workLifeId)
                  ?.name
              }}
              <span>|</span>
              {{
                configStore.getXLCode.find((item) => item.id === vita.talentchainVita?.education)
                  ?.name
              }}
            </span>
          </div>
          <div class="mt-0.5em">
            <van-icon name="guide-o" class="mr-0.5em" />
            <span>现居住地：{{ vita.talentchainVita?.address }}</span>
          </div>
        </div>
        <div class="mt-0.5rem"></div>
        <!-- <div class="grid grid-cols-2 mt-0.5rem gap-1rem">
          <van-button color="#b52d26">收藏简历</van-button>
          <van-button type="warning">下载简历</van-button>
        </div> -->
      </div>
    </div>
    <div class="p-1em bg-[#eee] h-full">
      <div class="w-full flex flex-col p-1em bg-white border-primary border-1px rounded-0.5em">
        <div class="flex items-center">
          <div class="node"></div>
          <div class="flex items-center">求职意向</div>
        </div>
        <div class="flex flex-col mt-0.5em">
          <span
            >是否全职：<span>
              {{
                configStore.getSFQZCode.find(
                  (item) => item.id === vita.talentchainVita?.jobStatusId,
                )?.name
              }}
            </span></span
          >
        </div>
        <div class="flex flex-col mt-0.5em">
          <span
            >渴望就业的国家或地区：<span
              ><countryIco
                :countryId="vita.talentchainVita?.countryId ? vita.talentchainVita.countryId : null"
              ></countryIco> </span
          ></span>
        </div>
        <div class="flex flex-col mt-0.5em">
          <span
            >雇主提供工作签证：<span>
              {{
                configStore.getQZCode.find((item) => item.id === vita.talentchainVita?.workVisaId)
                  ?.name
              }}
            </span></span
          >
        </div>
        <div class="flex flex-col mt-0.5em">
          <span
            >职位名称：<span>{{ vita.talentchainVita?.jobName }}</span></span
          >
        </div>
        <div class="flex flex-col mt-8px">
          <span
            >待遇要求：<span
              >¥{{ vita.talentchainVita?.salaryMin }} -
              {{ vita.talentchainVita?.salaryMax }} 人民币</span
            ></span
          >
        </div>
        <div class="flex flex-col mt-0.5em">
          <span
            >到岗时间：<span>
              {{
                configStore.getDGSJCode.find(
                  (item) => item.id === vita.talentchainVita?.beginWorkId,
                )?.name
              }}
            </span></span
          >
        </div>
        <div class="flex flex-col mt-0.5em">
          <span
            >提供食宿：<span>
              {{
                configStore.getSSCode.find(
                  (item) => item.id === vita.talentchainVita?.accommodationId,
                )?.name
              }}
            </span></span
          >
        </div>
        <div class="flex flex-col mt-0.5em">
          <span
            >求职状态：<span>
              {{
                configStore.getQZZZCode.find(
                  (item) => item.id === vita.talentchainVita?.jobConditionId,
                )?.name
              }}
            </span></span
          >
        </div>
      </div>
      <div
        class="w-full flex flex-col p-1em bg-white border-primary border-1px rounded-0.5em mt-1em"
        v-if="vita?.vitaWorkPastList && vita.vitaWorkPastList.length > 0"
      >
        <div class="flex items-center">
          <div class="node"></div>
          <div class="flex items-center">工作经历</div>
        </div>
        <div v-for="item in vita.vitaWorkPastList" :key="item.id">
          <div class="flex flex-col mt-1rem">
            <!-- <div class="flex">
              <div class="mr-1rem font-bold">{{ item.companyName }}</div>
              <div>{{ item.jobName }}</div>
            </div> -->
            <span
              ><span class="mr-0.5rem font-bold">{{ item.companyName }}</span
              ><span>{{ item.jobName }}</span></span
            >
            <div>{{ item.beginTime + '至' + item.endTime }}</div>
            <div>
              <span
                ><span class="font-bold">工作内容：</span><span>{{ item.workMessage }}</span></span
              >
            </div>
          </div>
        </div>
      </div>
      <div
        class="w-full flex flex-col p-1em bg-white border-primary border-1px rounded-0.5em mt-1em"
        v-if="vita?.vitaProPastList && vita.vitaProPastList.length > 0"
      >
        <div class="flex items-center">
          <div class="node"></div>
          <div class="flex items-center">项目经历</div>
        </div>
        <div v-for="item in vita.vitaProPastList" :key="item.id">
          <div class="flex flex-col mt-1rem">
            <div>{{ item.beginTime + '至' + item.endTime }}</div>
            <span v-show="item.jobName"
              ><span><span class="font-bold">担任职位：</span>{{ item.jobName }}</span></span
            >
            <div>
              <span
                ><span class="font-bold">工作内容：</span><span>{{ item.proName }}</span></span
              >
            </div>
          </div>
        </div>
      </div>
      <div
        class="w-full flex flex-col p-1em bg-white border-primary border-1px rounded-0.5em mt-1em"
        v-if="vita?.vitaEduPastList && vita.vitaEduPastList.length > 0"
      >
        <div class="flex items-center">
          <div class="node"></div>
          <div class="flex items-center">教育经历</div>
        </div>
        <div v-for="item in vita.vitaEduPastList" :key="item.id">
          <div class="flex flex-col mt-1rem">
            <span
              ><span class="mr-0.5rem font-bold">{{ item.schoolName }}</span
              ><span>{{
                configStore.getXLCode.find((node) => node.id === Number(item?.educationId))?.name
              }}</span></span
            >
            <div>{{ item.beginTime + '至' + item.endTime }}</div>
            <div>
              <span
                ><span class="font-bold">专业：</span><span>{{ item.speciality }}</span></span
              >
            </div>
          </div>
        </div>
      </div>
      <div
        class="w-full flex flex-col p-1em bg-white border-primary border-1px rounded-0.5em mt-1rem"
        v-if="vita?.talentchainVita?.advantages"
      >
        <div class="flex items-center mb-1rem">
          <div class="node"></div>
          <div class="flex items-center">自我评价</div>
        </div>
        <div v-html="vita.talentchainVita?.advantagesHtml"></div>
      </div>
      <div
        class="w-full flex flex-col p-1em bg-white border-primary border-1px rounded-0.5rem mt-1rem"
      >
        <div class="flex items-center">
          <div class="node"></div>
          <div class="flex items-center">联系方式</div>
        </div>
        <div class="flex flex-center flex-col px-1rem pt-1rem text-0.8rem">
          <div
            class="w-full flex justify-center py-0.8rem border-primary border-1px rounded-0.5rem bg-primary text-white"
            @click="unlockContact"
          >
            解锁联系方式
          </div>
          <!-- <div
            class="w-full flex justify-center py-0.8rem bg-primary rounded-0.5rem text-white mt-1rem"
          >
            邀请面试
          </div> -->
        </div>
      </div>
    </div>
    <div
      class="sticky bottom-0px left-0px w-100vw bg-white p-1rem flex justify-between items-center border-t"
    >
      <div class="min-w-20vw flex-2 flex flex-col justify-center items-center" @click="collectVita">
        <SvgIcon
          name="flowbite:star-outline"
          class="md mb-0.2rem"
          v-show="vita.talentchainVita?.isFavorite === 0"
        />
        <SvgIcon
          name="flowbite:star-solid"
          class="md mb-0.2rem text-primary"
          v-show="vita.talentchainVita?.isFavorite === 1"
        />
        <span>{{ vita.talentchainVita?.isFavorite === 0 ? '收藏简历' : '已收藏' }}</span>
      </div>
      <div
        class="min-w-20vw flex-2 flex flex-col justify-center items-center"
        @click="downloadVita"
      >
        <SvgIcon name="ic:sharp-download" class="md mb-0.2rem" />
        <span>下载简历</span>
      </div>
      <div
        class="flex flex-center py-0.6rem px-10px border bg-[#f8eae9] border-primary text-primary rounded-5px max-w-50vw min-w-45vw h-full"
        @click="inviteVita"
      >
        <SvgIcon name="mdi:video-outline" class="md text-primary mr-5px" />
        邀请面试
      </div>
    </div>
    <van-action-sheet v-model:show="showMyJob" title="选择岗位">
      <div class="relative">
        <div class="px-1rem">
          <van-radio-group v-model="targetJobId" shape="square">
            <div
              v-for="item in jobList"
              :key="item.id"
              class="py-0.8rem pl-1rem border mb-0.5rem"
              @click="targetJobId = item.id"
            >
              <van-radio :name="item.id">
                <div>{{ item.jobName }}</div>
              </van-radio>
              <div class="mt-0.5rem">
                <span>更新时间： {{ formatePaddingZeroDate(item.updateDate) }}</span>
              </div>
            </div>
          </van-radio-group>
          <el-empty :description="'暂无查询数据'" v-show="jobList.length == 0" />
        </div>
        <div
          class="sticky bottom-0px left-0px py-1rem px-1rem bg-white flex border-t justify-center px-1rem"
        >
          <div
            class="mr-1rem flex-1 bg-primary text-white py-0.5rem flex flex-center rounded"
            @click="sendJob"
          >
            邀请面试
          </div>
          <div class="flex-1 border py-0.5rem flex flex-center rounded" @click="showMyJob = false">
            取消
          </div>
        </div>
      </div>

      <van-dialog
        v-model:show="vitaShow"
        :title="'面试信息'"
        show-cancel-button
        :beforeClose="beforeClose"
      >
        <van-form @submit="onSubmit">
          <van-field label="面试岗位">
            <template #input>
              <span>{{
                targetJobId ? jobList?.find((item) => item.id === targetJobId)?.jobName : ''
              }}</span>
            </template>
          </van-field>
          <van-field
            v-model="vitaParams.hrMobile"
            required
            label="联系电话"
            placeholder="请输入联系电话"
            :rules="rules.hrMobile"
          />
          <van-field
            v-model="vitaParams.hrEmail"
            required
            label="联系邮箱"
            placeholder="请输入联系邮箱"
            :rules="rules.hrEmail"
          />
          <van-field
            v-model="vitaParams.address"
            required
            label="面试地址"
            placeholder="请输入面试地址"
            :rules="rules.address"
          />
          <van-field v-model="vitaParams.description" label="备注" />
        </van-form>
      </van-dialog>
    </van-action-sheet>
  </div>
</template>

<script setup>
import {
  getVitaDetail,
  getVitaPhone,
  personCollectOperate,
  getJobList,
  saveInterview,
} from '@/api/talent'
import { useRoute, useRouter } from 'vue-router'
import { ref } from 'vue'
import { useConfigStore } from '@/stores/config'
import countryIco from '@/components/countryIcon.vue'
import Cookies from 'jscookie'
import SvgIcon from '@/components/Icon.vue'
import { onActivated } from 'vue'
import { usePermissionStore } from '@/stores/permission'
import { useUserStore } from '@/stores/user'
import { formatePaddingZeroDate } from '@/utils/data'

const userStore = useUserStore()
const permission = usePermissionStore()
const configStore = useConfigStore()
const route = useRoute()
const router = useRouter()
const userPermission = ref(false)
const showMyJob = ref(false)
const jobList = ref([])
const targetJobId = ref()
const vitaShow = ref(false)
const vita = ref({})
const vitaParams = ref({})
const rules = ref({
  hrMobile: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
  hrEmail: [{ required: true, message: '请输入联系邮箱', trigger: 'blur' }],
  address: [{ required: true, message: '请输入面试地址', trigger: 'blur' }],
})

// 获取权限
const getPermission = async () => {
  const res = await permission.getPermissionByCode('YINGPIN')
  userPermission.value = res
}
const init = () => {
  if (Cookies.get('token')) {
    getPermission()
    userStore.isLogin().then((res) => {
      if (res) {
        getJobList({
          current: 1,
          size: 99,
          companyId: res.companyId,
        }).then(({ code, data }) => {
          if (code === 20000) {
            jobList.value = data.records
          }
        })
      }
    })
  }
  getVitaDetail(route.query.id).then((res) => {
    if (res.code === 20000) {
      vita.value = res.data
    }
  })
}

// 解锁联系方式
const unlockContact = () => {
  checkPermission(() => {
    getVitaPhone(route.query.id).then((res) => {
      if (res.code === 20000) {
        vita.value.talentchainVita.phone = res.data
      }
    })
  })
}

// 下载简历
const downloadVita = () => {
  checkPermission(() => {
    if (location.host === 'localhost:8880') {
      window.open(
        'https://www.rcep.cn/prod-api/talentchain/api/vita/exportToWord/' + route.query.id,
      )
    } else {
      window.open(
        `${window.location.origin}/prod-api/talentchain/api/vita/exportToWord/` + route.query.id,
      )
    }
  })
}

// 校验权限
const checkPermission = (callback) => {
  if (!Cookies.get('token')) {
    return showDialog({
      title: '提示',
      message: '请先登录',
    }).then(() => {
      // on close
      backToTop()
      router.push('/login')
    })
  } else if (!userPermission.value) {
    return showDialog({
      title: '提示',
      message: '您未开通人才链应聘功能，是否前往开通？',
      showCancelButton: true,
    }).then(() => {
      // on close
      backToTop()
      router.push('/module?code=ZHAOPIN')
    })
  }
  callback && callback()
  return true
}

// 邀请面试
const sendJob = () => {
  if (!targetJobId.value) {
    showDialog({
      title: '提示',
      message: '请选择岗位',
    })
  } else {
    vitaShow.value = true
  }
}

// 收藏简历
const collectVita = () => {
  checkPermission(() => {
    personCollectOperate(route.query.id).then((res) => {
      if (res.code === 20000) {
        if (res.data) {
          vita.value.talentchainVita.isFavorite = 1
          showDialog({
            title: '提示',
            message: '收藏成功',
          })
        } else {
          vita.value.talentchainVita.isFavorite = 0
          showDialog({
            title: '提示',
            message: '取消收藏成功',
          })
        }
      }
    })
  })
}

// 邀请面试
const inviteVita = () => {
  checkPermission(() => {
    showMyJob.value = true
  })
}

const beforeClose = (action) => {
  if (action === 'confirm')
    return new Promise((resolve) => {
      userStore.isLogin().then((res) => {
        if (res) {
          saveInterview({
            ...vitaParams.value,
            applicantMemberId: vita.value.talentchainVita?.memberId,
            applicantName: vita.value.talentchainVita?.name,
            applicantMobile: vita.value.talentchainVita?.mobile,
            vitaName: vita.value.talentchainVita?.name,
            vitaEmail: vita.value.talentchainVita?.email,
            talentVitaId: vita.value.talentchainVita?.id,
            jobName: vita.value.talentchainVita?.jobName,
            hrMemberId: res.id,
          })
            .then(({ code, data }) => {
              if (code === 20000) {
                showDialog({
                  title: '提示',
                  message: '邀请面试成功',
                })
                showMyJob.value = false
                vitaShow.value = false
                resolve(true)
              } else {
                resolve(false)
              }
            })
            .catch(() => {
              resolve(false)
            })
        } else {
          resolve(false)
        }
      })
    })
  else return true
}

onActivated(() => {
  init()
})

init()
</script>

<style lang="scss" scoped>
.node {
  width: 0.25em;
  height: 1em;
  margin-right: 1em;
  background: var(--color-primary-hex);
}
</style>
